<!--
 * @Author: lmh
 * @Date: 2021-08-14 15:21:58
 * @LastEditTime: 2021-08-18 15:11:30
 * @LastEditors: lmh
 * @Description: 患者详情
-->

<template>
  <div class="contain">
    <a-space :size="size">
      <div class="show-text">
        <sapn class="show-text-title">姓名</sapn>
        <sapn class="show-text-value">{{ patients.name }}</sapn>
      </div>
      <div class="show-text">
        <sapn class="show-text-title">性别</sapn>
        <span class="show-text-value">{{ patients.sex }}</span>
      </div>
      <div class="show-text">
        <span class="show-text-title">出生年月</span>
        <span class="show-text-value">{{ patients.birthDate }}</span>
      </div>
      <div class="show-text">
        <span class="show-text-title">联系方式</span>
        <span class="show-text-value">{{ patients.phoneNumber }}</span>
      </div>
      <div class="show-text">
        <span class="show-text-title">卡号</span>
        <span class="show-text-value">{{ patients.cardNumber }}</span>
      </div>
    </a-space>
    <div class="medical">
      <div class="medical-item">
        <div class="title-1">
          <a-space :size="size">
            <div class="show-text">
              <span class="show-text-title">病历号：</span>
              <span class="show-text-value">0368598</span>
            </div>
            <div class="show-text">
              <span class="show-text-title">床号：</span>
              <span class="show-text-value">15</span>
            </div>
            <div class="show-text">
              <span class="show-text-title">入院日期：</span>
              <span class="show-text-value">2021.04.01 10:00:00</span>
            </div>
          </a-space>
        </div>
        <div class="title-2">
          <a-space :size="size">
            <div class="show-text">
              <span class="show-text-title">入院病历：</span>
              <span class="show-text-value">病例文本内容*****************************************</span>
            </div>
          </a-space>
        </div>
        <div class="content">
          <viewer :images="images">
            <div class="img-box">
              <div class="img-item" v-for="src in images" :key="src">
                <img :src="src" />
                <div>
                  <span>日期：</span>
                  <span>2021.04.12</span>
                </div>
                <div>
                  <span>备注：</span>
                  <span>**********</span>
                </div>
              </div>
            </div>
          </viewer>
        </div>
      </div>
      <div class="medical-item">
        <div class="title-1">
          <a-space :size="size">
            <div class="show-text">
              <span class="show-text-title">病历号：</span>
              <span class="show-text-value">0368598</span>
            </div>
            <div class="show-text">
              <span class="show-text-title">床号：</span>
              <span class="show-text-value">15</span>
            </div>
            <div class="show-text">
              <span class="show-text-title">入院日期：</span>
              <span class="show-text-value">2021.04.01 10:00:00</span>
            </div>
          </a-space>
        </div>
        <div class="title-2">
          <a-space :size="size">
            <div class="show-text">
              <span class="show-text-title">入院病历：</span>
              <span class="show-text-value">病例文本内容*****************************************</span>
            </div>
          </a-space>
        </div>
        <div class="content">
          <viewer :images="images">
            <div class="img-box">
              <div class="img-item" v-for="src in images" :key="src">
                <img :src="src" />
                <div>
                  <span>日期：</span>
                  <span>2021.04.12</span>
                </div>
                <div>
                  <span>备注：</span>
                  <span>**********</span>
                </div>
              </div>
            </div>
          </viewer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
export default {
  setup() {
    const data = reactive({
      patients: {
        name: '张三',
        sex: '男',
        birthDate: '1981-01-01',
        phoneNumber: '13905050505',
        cardNumber: 'D0000123123',
      },
      images: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/200/201',
        'https://picsum.photos/200/202',
        'https://picsum.photos/200/203',
        'https://picsum.photos/200/204',
        'https://picsum.photos/200/205',
        'https://picsum.photos/200/206',
        'https://picsum.photos/200/207',
        'https://picsum.photos/200/208',
        'https://picsum.photos/200/209',
      ],
    });
    return {
      ...toRefs(data),
      size: ref(100),
      imgSize: ref(10),
    };
  },
  methods: {
    inited(param) {
      console.log('图片', param);
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  height: calc(100% - 32px);
  overflow-y: auto;
  padding: 10px;
}
.show-text {
  &-title {
    margin-right: 10px;
  }
}
.medical {
  padding: 10px;
  .title-1 {
    margin-bottom: 10px;
  }
  .content {
    margin-top: 10px;
    border-top: #ccc 2px solid;
  }
}
.img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .img-item {
    padding-top: 10px;
  }
}
.medical-item {
  margin-top: 20px;
}
</style>
